<template>
  <view class="px10px pt15px">
    <Card title="票据管理" contain>
      <view class="flex flex-wrap gap-8 p-20px">
        <view class="flex flex-col w-6/24 items-center" v-for="item in cardList" :key="item.type">
          <view
            class="w-50px h-50px flex justify-center items-center rounded-full"
            :class="item.bg"
            @tap="handleTap(item.type)">
            <image class="w-26px" mode="widthFix" :src="`/static/img/${item.icon}.png`" />
          </view>
          <text class="text-gray-7 m-t-5px text-14px">{{ item.label }}</text>
        </view>
      </view>
    </Card>
    <!-- <Card title="人员管理" contain className="mt15px">
      <view class="flex flex-wrap gap-8 p-20px">
        <view class="flex flex-col w-6/24 items-center" v-for="item in cardList" :key="item.type">
          <view class="w-50px h-50px flex justify-center items-center rounded-full" :class="item.bg">
            <image class="w-26px" mode="widthFix" :src="`/static/img/${item.icon}.png`" />
          </view>
          <text class="text-gray-7 m-t-5px text-14px">{{ item.label }}</text>
        </view>
      </view>
    </Card>
    <Card title="机械管理" contain className="mt15px">
      <view class="flex flex-wrap gap-8 p-20px">
        <view class="flex flex-col w-6/24 items-center" v-for="item in cardList" :key="item.type">
          <view class="w-50px h-50px flex justify-center items-center rounded-full" :class="item.bg">
            <image class="w-26px" mode="widthFix" :src="`/static/img/${item.icon}.png`" />
          </view>
          <text class="text-gray-7 m-t-5px text-14px">{{ item.label }}</text>
        </view>
      </view>
    </Card> -->
  </view>
</template>

<script>
import Card from "@/components/card";

export default {
  components: { Card },
  data() {
    return {
      cardList: [
        { type: 1, label: '人工', icon: 'rg', bg: 'bg-blue-50' },
        { type: 2, label: '机械', icon: 'jx', bg: 'bg-green-50' },
        { type: 3, label: '材料', icon: 'cl', bg: 'bg-yellow-50' }
      ]
    };
  },
  methods: {
    handleTap(type) {
      uni.navigateTo({
        url: '/pages/receipt/create?type=' + type
      });
    }
  }
};
</script>

<style></style>
